<template>
  <div>
    <button
      :class="['btn','btn-'+type,'btn-'+size,'btn-'+(isRound=='true'? 'isRound':''),'btn-'+type+'-'+(isNaive=='true'? 'isNaive':'')]"
      @click="add"
    >
      <slot name="icon"></slot>
      <slot></slot>
      <slot name="footer"></slot>
    </button>
  </div>
</template>

<script>
export default {
  name: "MyButton",
  props: {
    type: {
      default: "",
      validator(value) {
        // 验证类型
        return ["primary", "success", "danger", ""].includes(value);
      }
    },
    size: {
      default: "",
      validator(value) {
        // 验证类型
        return ["medium", "small", "mini", ""].includes(value);
      }
    },
    isRound: {
      default: "false"
    },
    isNaive: {
      default: "false"
    }
  },
  methods: {
    add() {
      console.log("子组件内点击add方法执行");
      this.$emit("myClick");
    },
    add2() {
      console.log("子组件内点击add2方法执行");
    }
  }
};
</script>

<style scoped>
.btn {
  /* 按钮样式 */
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  margin: 5px;
  cursor: pointer;
}
.btn-primary {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}
.btn-success {
  background-color: #67c23a;
  color: #fff;
  border-color: #67c23a;
}
.btn-danger {
  background-color: #f3958e;
  color: #fff;
  border-color: #f3958e;
}
.btn-medium {
  padding: 12px 20px;
}
.btn-small {
  padding: 5px 10px;
}
.btn-mini {
  padding: 2px 5px;
}
.btn-isRound {
  border-radius: 20px;
}
.btn-primary-isNaive {
  background-color: #cbe2ff;
}
.btn-success-isNaive {
  background-color: #dfffc9;
}
.btn-danger-isNaive {
  background-color: #ffbbbb;
}
</style>